<template>
  <el-select v-model="yearCurrent" placeholder="Select" style="width: 200px">
    <el-option
        v-for="item in [{label:'2023',value:0,label:'2024',values:1}]"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    />
  </el-select>
  <ul class="base-box">
    <li>
      <div><strong style="color: #0b63b7">{{ formatNumber(yearData.total).value }}</strong> <small>{{
          formatNumber(yearData.total).unit
        }}元(全区: <span style="color: #0b63b7">
        {{ formatNumber(yearData.totalFenghua).value }} {{ formatNumber(yearData.totalFenghua).unit }}元</span>
        )</small></div>
      <div>2024年01-04总产值</div>
    </li>
    <li>
      <div><strong :style="{color:yearData.rate>0?'red':'green'}">{{ formatPercentage(yearData.rate) }}</strong> (全区:
        <span
            :style="{color:yearData.rateFenghua>0?'red':'green'}">{{ formatPercentage(yearData.rateFenghua) }}</span> )
      </div>
      <div>同比去年上涨</div>
    </li>
  </ul>
  <br>
  <div ref="BarECharts" style="width: 100%;height: 320px"></div>
</template>

<script setup>
import {formatNumber, formatPercentage} from '@/utils/index.js'
import {lightingAalysisList} from '../data/data.js'
import {onMounted, reactive, ref} from "vue";
import * as echarts from 'echarts';

const yearCurrent = ref(0)
const BarECharts = ref(null)
const yearData = reactive(lightingAalysisList.year)


onMounted(() => {
  const colors = ['#73deb3', '#788ab0', '#f67b38', '#6dc8ec', '#9270ca', '#fa8c16', '#b37feb', '#ff0000']
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      color: ['#5b9bd5', '#ed7d31'],
      backgroundColor: '#FFF',
      grid: {
        top: 50,
        bottom: 60,
        left: '12%',
        right: '12%'
      },
      legend: {
        top: 10,
        itemWidth: 30,
        itemHeight: 6,
        data: ['产值', '产值同比', '产值环比', '近12月平均值']
      },
      xAxis: [
        {
          nameLocation: 'center',
          nameGap: 30,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#CCC'
            }
          },
          data: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06'],
        }
      ],
      yAxis: [
        {
          nameLocation: 'center',
          nameGap: 40,
          nameTextStyle: {
            color: '#000'
          },
          axisLine: {
            lineStyle: {
              color: '#CCC'
            },
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#CCC'
            }
          },
          axisLabel: {
            color: '#000'
          }
        },
        {

          nameLocation: 'center',
          nameGap: 40,
          nameTextStyle: {
            color: '#000'
          },
          axisLine: {
            lineStyle: {
              color: '#CCC'
            },
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#000'
          }
        }
      ],
      series: [
        {
          name:'产值',
          type: 'bar',
          barWidth: '20%',
          data: [112.71, 71.95, 67.25]
        },
        {
          name:'产值同比',
          type: 'line',
          yAxisIndex: 1,
          itemStyle: {
            opacity: 1
          },
          lineStyle: {
            color:colors[0],
            width: 2
          },
          data: [28.65, 5.83, 18.34]
        },
        {
          name:'产值环比',
          type: 'line',
          yAxisIndex: 1,
          itemStyle: {
            opacity: 1
          },
          lineStyle: {
            color:colors[1],
            width: 2
          },
          data: [-25.95, 26.54, 6.53]
        },
        {
          name:'近12月平均值',
          type: 'line',
          yAxisIndex: 1,
          itemStyle: {
            opacity: 1
          },
          lineStyle: {
            color:colors[3],
            width: 2
          },
          data: [63.84, 64.2, 65.01]
        }
      ]
    };
    Echarts.setOption(option);

    window.onresize = Echarts.resize
  }
})


</script>

<style lang="scss" scoped>
.base-box {
  margin-top: 20px;
  height: 100px;
  display: flex;
  background-color: #ffffff;
  justify-content: space-between;
  align-items: center;

  > li {
    width: 50%;
    text-align: center;
  }

  > li:first-child {
    border-right: 1px solid #cccccc;
  }
}
</style>
